<template>
	<div class="home-index">
		<p>home test</p>
		<router-link to="login">login</router-link>
		<router-link to="my">我的</router-link>
		<a href="/detail">detail</a>
		<demo-local></demo-local>
		<demo-login></demo-login>
		<demo-ajax></demo-ajax>
		<flexbox :gutter="6">
			<div class="avatar"></div>
			<flexbox-item :span="3/4">
				<flexbox direction="column" align="flex-start" justify="center">
					<span>{{cityNm}}</span>
					<span>是电风扇的</span>
				</flexbox>
			</flexbox-item>
		</flexbox>
		<city-picker @on-select="evt_citySelected"></city-picker>
		<demo-loadmore></demo-loadmore>
	</div>
</template>
<style lang="less">
	.avatar {
		width: 50px;
		height: 50px;
		background-color: #cc0;
	}
</style>
<script type="text/javascript">
	import DemoLocalStore from '@/components/demo_localstorage';
	import DemoLogin from '@/components/demo_login';
	import DemoAjax from '@/components/demo_ajax';
	import DemoLoadMore from '@/components/demo_loadmore';
	import CityPicker from '@/components/city_picker';
	import { Flexbox, FlexboxItem } from 'vux';

	export default {
		data: () => {
			return {
				cityNm: ''
			}
		},
		methods: {
			evt_citySelected(info) {
				this.cityNm = info.nm;
				console.log(info);
			}
		},
		components: {
			[DemoLocalStore.name]: DemoLocalStore,
			[DemoLogin.name]: DemoLogin,
			[DemoAjax.name]: DemoAjax,
			[DemoLoadMore.name]: DemoLoadMore,
			[CityPicker.name]: CityPicker,
			[Flexbox.name]: Flexbox,
			[FlexboxItem.name]: FlexboxItem
		}
	}
</script>